<template>
  <div>
    <table>
      <caption>
        欢迎光临 vue开发的收银系统 水果店
      </caption>
      <tr>
        <td style="font-weight: 700;">苹果10￥/斤,折扣＜8折＞</td>
      </tr>
      <tr>
        <td>请输入你要购买的斤数<input type="text"></td>
      </tr>
      <tr>
        <td><button>结账买单-</button></td>
      </tr>
      <tr>
        <td>结账单:总价:20元 折后价:16元 省了:4元</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {};
</script>

<style>
table,
tr,
td {
  border: 1px solid #000;
  font-size: 20px;
}
td {
  width: 500px;
  height: 40px;
  line-height: 40px;
  text-align: center;
 
}
table {
  margin: 50px auto;
}
</style>